<template>
  <div>
    <el-container>
      <div class="home">
        <el-row>
          <el-col :span="2" :offset="1">
            <el-avatar
              :src="user.avatarUrl"
              :size="80"
              shape="circle"
            ></el-avatar>
          </el-col>
        </el-row>
          <el-row>
            <el-col :span="2" :offset="1">{{ user.nickName }}</el-col>
          </el-row>
      </div>
      <el-header style="height:10%">
        <el-radio-group  v-model="isCollapse">
          <el-radio-button :label="false">扩展</el-radio-button>
          <el-radio-button :label="true">折叠</el-radio-button>
        </el-radio-group>
      </el-header>
      

      <el-container>
        <el-aside width="200px" >
          <el-menu  
          :collapse="isCollapse"
          router
          :default-active="activePath.value"
          
          >
            <el-menu-item class="nav-item" index="/activity">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-huodong1"></use>
              </svg>
              <template #title>活动</template>
            </el-menu-item>
            <el-menu-item  class="nav-item" index="/game">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-youxi"></use>
              </svg>
              <template #title>游戏</template>
            </el-menu-item>
            <el-menu-item class="nav-item" index="/talk">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiaoxi"></use>
              </svg>
              <template #title>说说</template>
            </el-menu-item>
            <el-menu-item class="nav-item" index="/personalcenter">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-ziyuan14"></use>
              </svg>
              <template #title>个人中心</template>
            </el-menu-item>
            <el-menu-item class="nav-item" index="/chatroom">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-018-chat"></use>
              </svg>
              <template #title>聊天室</template>
            </el-menu-item>
            <el-menu-item class="nav-item" index="/templefair">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-miaohui"></use>
              </svg>
              <template #title>庙会</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>

import { computed, onMounted, reactive, ref, watch, } from "vue";
  import {  useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

  const isCollapse = ref(false);
  const router = useRouter();
  let activePath = reactive({
    value:""
  });
  
  // 通过监听路径变化改变导航高亮
  // 不能使用ref()定义变量
  watch(
    () => router.currentRoute.value.path,
    (newValue,oldValue) => {
      activePath.value = newValue;
    },
    {immediate: true}
  )

  const store = useStore();
  const user = computed({
  get: () => {
    return store.getters.getUserInfo;
  },
  set: () => {
    return store.getters.getUserInfo;
  }
});
  
  
</script>

<style scoped>

.home {
  overflow: hidden;
  padding: 0 5px;
  box-sizing: border-box;
}
/* 头部 */
.header {
  background-color: rgb(255, 255, 0);
  font-size: 36px;
}

/* 导航栏 */
.nav-item {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-size: 18px;
}

.main {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 200px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}

</style>
